[系统运维]linux创建Vue2脚手架项目命令

环境配置

Node.js下载链接

npm包安装语法：npm install <包名>[@<版本号>][[ 参数]...]

• -g 安装到Node环境中；
• -save 安装到项目中，需要当前目录有./package.json；
• -save-dev 安装到项目中，需要当前目录有./package.json。

npm -v
npm install vue-cli -g
npm cinfig prefix # 看安装到哪里了

创建Vue2脚手架项目

1. 先进入项目目录，注意，cli会把项目创建到当前目录下以项目名为名的文件夹中：

   cd ./Documents/projects
   vue init webpack demo
   

2. 然后按照提示输入项目名称、项目简介、作者：

   nebula@Ubuntu:~/Documents/projects$ vue init webpack demo
   
   ? Project name demo
   ? Project description Some description
   ? Author nebula
   ? Vue build (Use arrow keys)
   ? Runtime + Compiler: recommended for most users 
     Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are O
   NLY allowed in .vue files - render functions are required elsewhere 
   

   以下为机翻，按方向键选择，按空格确认：

   nebula@Ubuntu:~/Documents/projects$ vue init webpack demo
   
   ? 项目名称演示 demo
   ? 项目描述一些描述 Some description
   ? 作者 nebula
   ? Vue构建（使用“↑”、“↓”键）
   ? 运行时+编译器：建议大多数用户使用
     仅运行时：大约6KB min+gzip，但模板（或任何特定于Vue的HTML）是0
   仅允许在.vue文件中使用-其他地方需要渲染函数
   

3. 然后两个Yes，接下来选择代码格式化规范，这个个人开发的话前两个随便选（显然我们并不想configure it ourselves）：

   nebula@Ubuntu:~/Documents/projects$ vue init webpack demo
   
   ? Project name demo
   ? Project description Some description
   ? Author nebula
   ? Vue build standalone
   ? Install vue-router? Yes
   ? Use ESLint to lint your code? Yes
   ? Pick an ESLint preset (Use arrow keys)
   ? Standard (https://github.com/standard/standard) 
     Airbnb (https://github.com/airbnb/javascript) 
     none (configure it yourself) 
   

4. 单元测试选了No，但不排除有时确实需要单元测试；e2e同理。
   然后用什么创建项目，选择npm即可：

   nebula@Ubuntu:~/Documents/projects$ vue init webpack demo
   
   ? Project name demo
   ? Project description Some description
   ? Author nebula
   ? Vue build standalone
   ? Install vue-router? Yes
   ? Use ESLint to lint your code? Yes
   ? Pick an ESLint preset Standard
   ? Set up unit tests No
   ? Setup e2e tests with Nightwatch? No
   ? Should we run `npm install` for you after the project has been created? (recommended) (U
   se arrow keys)
   ? Yes, use NPM 
     Yes, use Yarn 
     No, I will handle that myself 
   

5. 漫长等待：

   nebula@Ubuntu:~$ cat /proc/version
   Linux version 5.4.0-81-generic (buildd@lgw01-amd64-052) (gcc version 9.3.0 (Ubuntu 9.3.0-17ubuntu1~20.04)) #91-Ubuntu SMP Thu Jul 15 19:09:17 UTC 2021
   nebula@Ubuntu:~/Documents/projects$ npm -v
   6.14.4
   nebula@Ubuntu:~/Documents/projects$ node -v
   v10.19.0
   nebula@Ubuntu:~/Documents/projects$ vue -V
   2.9.6
   nebula@Ubuntu:~/Documents/projects$ 
   nebula@Ubuntu:~/Documents/projects$ vue init webpack demo
   
   ? Project name demo
   ? Project description Some description
   ? Author nebula
   ? Vue build standalone
   ? Install vue-router? Yes
   ? Use ESLint to lint your code? Yes
   ? Pick an ESLint preset Standard
   ? Set up unit tests No
   ? Setup e2e tests with Nightwatch? No
   ? Should we run `npm install` for you after the project has been created? (recommended) np
   m
   
      vue-cli · Generated "demo".
   
   
   # Installing project dependencies ...
   # ========================
   
   npm WARN deprecated babel-eslint@8.2.6: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
   npm WARN deprecated eslint-loader@1.9.0: This loader has been deprecated. Please use eslint-webpack-plugin
   [ .................] | fetchMetadata: sill pacote range manifest for error-stack-parser@[ .................] / fetchMetadata: sill pacote range manifest for glob@^7.1.2 fetched in 3849ms
   

6. 安装完成会弹出这样的文字：

   Running eslint --fix to comply with chosen preset rules...
   # ========================
   
   
   > demo@1.0.0 lint /home/mint/Documents/projects/demo
   > eslint --ext .js,.vue src "--fix"
   
   
   # Project initialization finished!
   # ========================
   
   To get started:
   
     cd demo
     npm run dev
     
   Documentation can be found at https://vuejs-templates.github.io/webpack
   

7. 安装一些其它东西，比如组件库：

   npm install --save axios
   npm install element-ui -S
   

目录结构

• 📁?build?项目构建（webpack）相关代码
• 📁?config?配置目录
  • 📄?index.js?这里可以配端口号和localhost
  • 📄?dev.env.js?
  • 📄?prod.env.js?
• 📁?node_modules?项目依赖
• 📁?src?
  • 📁?assets?项目资源，图片（图标）、静态json等等…
  • 📁?components?自己封装的组件可以放在这里
  • 📁?router?vue-router路由配置所在位置，配页面路径映射
  • 📁?views?页面
  • 📄?App.vue?根页面，所有页面都在这个里显示
  • 📄?main.js?项目主文件
• 📁?static?静态资源，字体、图片、写死的样式表甚至pdf、视频等
• 📄?.babelrc?用来搞兼容的，不是所有浏览器都兼容es6
• 📄?index.html?首页入口文件
• 📄?package-lock.json?其指定了依赖的大版本号防止项目依赖更新导致错误
• 📄?package.json?项目配置
• 📄?vue.config.js?全局配置可以没有