首页 / VUE / Linux 安装npm和Vue CLI
Linux 安装npm和Vue CLI
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Linux 安装npm和Vue CLI，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6290字，纯文字阅读大概需要9分钟。
内容图文
1.安装npm
sudo apt-get install npm
测试安装是否成功: npm -v 弹出安装的版本号，即可证明安装成功
我的已经安装了。图上：
sudo npm install -g npm
更新npm到最新版
2.安装Vue CLI
1.Install:
sudo npm install -g @vue/cli
# OR
yarn global add @vue/cli
2.Create a project:
vue create my-project
# OR
vue ui
我选择把这个项目创建在workspace下
此处有两个选择：
default (babel, eslint)默认套餐，提供 babel 和 eslint 支持。Manually select features自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。
可以使用上下方向键来切换选项。如果只需要 babel 和 eslint 支持，那么选择第一项，就完事了，静静等待 vue 初始化项目。
如果想要更多的支持，就选择第二项：切换到第二项，按下 enter 键选中，弹出如下界面：
vue-cli 内置支持了8个功能特性，可以多选：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。
对于每一项的功能，此处做个简单描述：
TypeScript支持使用 TypeScript 书写源码。Progressive Web App (PWA) SupportPWA 支持。Router支持 vue-router 。Vuex支持 vuex 。CSS Pre-processors支持 CSS 预处理器。Linter / Formatter支持代码风格检查和格式化。Unit Testing支持单元测试。E2E Testing支持 E2E 测试。
那么基于开发常见的项目，同时兼顾项目健壮性的原则，本次选择如下特性支持：（注：空格键是选中与取消，A键是全选）
按下 enter 键确认选择，进入下一步
这里是让选择在开发 Vue 组件时，要不要使用 class 风格的写法。为了更方便地使用 TypeScript ，此处选择 Y ：
按下 enter 键确认选择，进入下一步
这个选项的意思是要不要使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills
按下 enter 键确认选择，进入下一步
这个选项的意思是要不要使用 历史的路由，我选择NO
这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
选yes的话需要服务器那边再进行设置
按下 enter 键确认选择，进入下一步
这里就是说我们在项目里面需要支持何种动态样式语言，此处提供了三个选项：
此处选择 LESS ，进入下一步：
这个选项的意思是选择规范我们代码的选项：我选的是：ESLint + Standard config
TSLint
ESLint仅具有错误预防功能
ESLint + Airbnb配置
?ESLint+标准配置
ESLint + Prettier
按下 enter 键确认选择，进入下一步
Lint on save // 保存就检测
Lint and fix on commit // fix和commit时候检查?我选择保存就检测
按下 enter 键确认选择，进入下一步
选择单元测试工具，直接选择现在比较火的 Jest ，进入下一步：
In dedicated config files ，进入下一步：
问你要不要不要把当前的这一系列选项配置保存起来，方便下一次创建项目时复用。我选择N不记录，如果键入Y需要输入保存名字，有点麻烦。。。
11.确定后，等待下载依赖模块
安装完成后就是这样：
按照命令启动：
在浏览器中访问地址打开了如下界面：
关于端口号的配置，打包之后路径的配置，图片的配置 等等.....需要在根目录下创建vue.config.js
Js代码在下面：
1 /**
2 * @fileOverview app配置
3 *官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
4 * @author Franks.T.D
5 * @date 2018/06/17
6 */
7
8 const path = require('path')
9 const debug = process.env.NODE_ENV !== 'production'
10 const VueConf = require('./src/assets/js/libs/vue_config_class')
11 const vueConf = new VueConf(process.argv)
12
13 console.log('')
14 console.log('本地启动或构建的文件信息 | 开始--------------------------------------------------------------')
15 console.log(vueConf.pages)
16 console.log('本地启动或构建的文件信息 | 结束--------------------------------------------------------------')
17 console.log('')
18
19 module.exports = {
20 baseUrl: vueConf.baseUrl, // 根域上下文目录
21 outputDir: 'dist', // 构建输出目录
22 assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
23 pages: vueConf.pages,
24 lintOnSave: true, // 是否开启eslint保存检测，有效值：ture | false | 'error'
25 runtimeCompiler: true, // 运行时版本是否需要编译
26 transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
27 productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
28 configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
29 if (debug) { // 开发环境配置
30 config.devtool = 'cheap-module-eval-source-map'
31 } else { // 生产环境配置
32 }
33 Object.assign(config, { // 开发生产共同配置
34 resolve: {
35 alias: {
36 '@': path.resolve(__dirname, './src'),
37 '@c': path.resolve(__dirname, './src/components'),
38 'vue$': 'vue/dist/vue.esm.js'
39 }
40 }
41 })
42 },
43 chainWebpack: config => { // webpack链接API，用于生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
44 if (debug) {
45 // 本地开发配置
46 } else {
47 // 生产开发配置
48 }
49 },
50 css: { // 配置高于chainWebpack中关于css loader的配置
51 modules: true, // 是否开启支持‘foo.module.css’样式
52 extract: true, // 是否使用css分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用<style>方式内联至html文件中
53 sourceMap: false, // 是否在构建样式地图，false将提高构建速度
54 loaderOptions: { // css预设器配置项
55 css: {
56 localIdentName: '[name]-[hash]',
57 camelCase: 'only'
58 },
59 stylus: {}
60 }
61 },
62 parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
63 pluginOptions: { // 第三方插件配置
64 },
65 pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
66 },
67 devServer: {
68 open: true,
69 host: '0.0.0.0',
70 port: 8080,
71 https: false,
72 hotOnly: false,
73 proxy: {
74 '/api': {
75 target: '<url>',
76 ws: true,
77 changOrigin: true
78 }
79 },
80 before: app => {}
81 }
82 }
View Code
打包上线
在开发完项目之后，就应该打包上线了。 vue-cli 也提供了打包的命令，在项目根目录下执行：
npm run build
执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。
实际上，在部署的时候要注意，假设静态服务器的域名是 http://static.baidu.com ，那么对应到访问 <项目根目录>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ，其他的静态资源以此类推。
单元测试
执行：
npm run test
内容总结
以上是互联网集市为您收集整理的Linux 安装npm和Vue CLI全部内容，希望文章能够帮你解决Linux 安装npm和Vue CLI所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。