vue 项目初始化（vue-cli）

安装vue-cli工具

Mac 上安装会报 Please try running this command again as root/Administrator 的错。这是需要管理员权限。解决办法：sudo chown -R $USER /usr/local

安装vue-cli工具

npm install -g vue-cli

用webpack模版初始化一个新的项目

vue init webpack <项目名称>

安装必要的依赖

cd <项目>

npm install

安装vue-router

npm install vue-router

安装对应的css加载器

npm install style-loader css-loader

如果是sass加载器：

npm install --save node-sass sass-loader

项目打包生成静态文件dist

npm run build

在本地打开

npm run dev     

然后出现Your application is running here: http://localhost:8080,在浏览器中打开http://localhost:8080,如果出现vue页面就完成了

如果想要执行npm run dev的时候，自动在浏览器中打开

编辑config目录下的index.js文件。

autoOpenBrowser: false将false改成true。autoOpenBrowser: false

配置文件说明 .babelrc babel配置文件，把我们ES2105的代码通过它编译成ES5的。 .editorconfig 编辑器配置 .eslintignore 忽略语法检查的目录文件配置 .eslintrc.js eslint的配置文件 .gitignore 配置git仓库的忽略 index.html 项目入口模板文件 package.json node配置文件

可以在src中的目录下新建一个文件style，里边写css文件。然后在app.vue中引入css文件， 下边是app.vue文件

<template>
    <router-view></router-view>
</template>

<script>
export default {
  name: 'app'
}
</script>

<!-- 引入各个文件的内部样式 -->
<style src="./styles/magic.scss" lang="scss"></style>