项目环境：
node -v：v8.11.1
npm -v: 5.6.0
cnpm -v:5.2.0
注意：Vue 不支持 IE8 及以下版本，在用 Vue 构建大型应用时推荐使用 NPM 安装。
在创建vue项目之前先用npm安装webpack：cnpm install webpack -g
第一步：npm方法安装vue
1.安装vue： cnpm install vue
2.全局安装vue-cli: cnpm install -g vue-cli
第二步：完成了第一步，以后每次就是用以下命令创建vue项目
1.创建一个基于 webpack 模板的新项目: vue init webpack project
2.安装依赖：如图：
vue.png
到此为止，一个vue项目就创建好了。是不是很简单，，不妨根据提示进入项目文件夹，测试一下，接着命令行继续执行最后两行：cd vue-project 然后npm run dev
执行成功后，会返回一个测试链接：http://localhost:8080，在浏览器中输入此链接，便可以看见以下网页：
vue-test.png
至此，表明你已经成功创建了一个vue项目，可以在项目文件夹中看见项目中所有的文件：
所有需要require的文件，没有./这个的话，都去node_modules文件夹里找
@表示自定义的根目录
1.build-[webpack配置]
主要启动文件是webpack.dev.conf.js
当我们输入npm run dev时候，首先启动的就是这个,它会去检查node和npm版本，加载配置，然后启动服务
2.config-[vue项目配置]
项目相关配置：主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api 等。
主要是index.js，当端口冲突时配置监听端口，打包输出路径及命名等
3.node_modeles-[依赖包]
项目依赖库，也可以自己按需要添加其它依赖：cmd。。 进入项目。。npm install 包名称
4.src-[项目核心文件]
assets:放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。之所以强调是公共的 css 文件，是因为要在组件的 css 标签里加入 ‘scoped‘ 标记，避免污染全局样式；
components:放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等。
main.js-[入口文件]：主要是引入vue框架，根据组件以及路由设置，并定义vue实例
router文件夹下的index.js设置路由，用于绑定自定义的vue文件等
5.static-[静态文件：图片，json数据]
第三步：引入一个好用的vue插件element-ui
1.安装element-ui，不是接着上面的命令继续敲，而是将项目拖到一个本地编辑器中，然后输入cnpm i element-ui -S
element.png
2.项目配置：在一个编辑器中打开刚创建的项目，在src文件夹下的main.js中填入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
3.测试element-ui的插件是否起到作用了，用一个按钮测试，如上图中红色框框中添加的一句代码
注意事项：通过npm方法创建vue-cli的项目时，有两个需要注意的问题
-
一个组件下只能有一个并列的div
854231-b219f2ef37474fe1.jpg
2.据要写在 return 里面
854231-5da5ffe18910e72f.jpg
网友评论