vue脚手架vue-cli基本操作一

前言: 在开发之间请认真阅读vue文档!

node
npm(可以用cnpm代替)

node -v 和 npm -v 查看版本号

安装vue-cli npm install -g vue-cli
vue -V 查看是否安装成功 出现版本号这安装成功

Vue init webpack projectName 构建项目名为projectName的项目,也是项目文件夹名称

?Project name 
?Project description <A Vue.js project> Enter
?Author Enter
>Runtime + Compiler: recommended for most users Enter
? Install vue-router? (Y/n) y
? Use EsLint to lint your code?(Y/n) 是否安装代买规范 n
? Set up unit tests(Y/n) 单元测试 n
? Setup e2e tests with Nightwatch? (Y/n) n
? Should we run 'npm install' for you after the project had been create? (recommended)
Yes, use npm //是的使用npm安装
Yes, use Yarn //是的 使用yarn 安装
No, I will handle that myself //

npm安装方式会比较慢 ,会选择第三个选项, 使用cnpm安装

项目基本结构

-projectName - //文件名
  -node_modules //package.json 对应的安装包
  -build //
  -config
  -src- //主文件
  -assets //静态文件 css,js, img 这些文件会在build的时候一起打包
  -components //组件文件夹
    -Index.vue
    -
    ...
  -router //路由
    -index.js
  -app.vue //
  -main.js //入口文件
  -static //静态文件 css,js, img 这些文件会在build的时候不会被打包
  -index.html //
  -package.json //项目所有依赖包的文件名
  -README.md

cd projectName 找到项目
使用 cnpm install 安装package.json里的包

安装完后 输入 npm run dev运行项目 在浏览器中输入localhost:8080

输入npm run build 对项目进行打包,项目中会出现dist文件夹

项目中所需的一些包和映入方式可参考对应的包的文档进行安装好使用

 

  

posted @ 2018-06-19 10:27  tadyim  阅读(157)  评论(0编辑  收藏  举报