vue基本开发环境搭建

Posted 2021-01-04 liushusong

1. 先安装node运行环境
   下载网址 https://nodejs.org/en/或者http://nodejs.cn/
2. 检查node是否安装成功
   命令行窗口直接输入
   

   $ node -v

   如果输出版本号，说明我们安装node 环境成功
   再查看npm版本号
   

   $ npm -v

3. 安装淘宝镜像(此步骤是为了提高下载速度，可以忽略)
   如果访问外网比较慢，可以使用淘宝镜像。
   安装淘宝镜像，在命令行中输入 
   

   $ npm install -g cnpm --registry=https://registry.npm.taobao.org

    安装之后我们就可以使用cnpm代替npm了，下载速度急速提升呐。当然，如果不想使用淘宝镜像，直接用npm也是可以的。

4. 接下来就是最关键的一步-----vue-cli
   

   $ cnpm install -g vue-cli

    安装成功之后查看安装的版本号(v要大写)

   $ vue -V

    如果能输出本版好证明安装成功。

5. 接下来就是创建项目了
   5.1 初始化项目 

   $ vue init webpack <你的项目名称>

    一直回车可以看到下图
   
   其中的每一项都可以自己根据自己的需要去填写。
   Install vue-router：是否安装vue-router，我们项目中肯定会用到，所以选择yes
   Use ESLint to lint your code：是否需要 js 语法检测 ，目前用不到，选择no
   直到安装成功。

6. 进入到你的项目文件夹
   执行

   $ npm run dev

    如果没报错，出现下图
   
   那么恭喜你，你的第一个vue项目就创建成功了。
   如果报错了，很简单，只需要输入

   $ cnpm install

    安装所需要的依赖，然后在执行

   $ npm run dev

    即可。

7. 如果想要打包，可以输入
   

   $ npm run build

    会在名目文件见中自动生成一个新的文件夹 dist

   如果打包之后，访问页面出现白屏问题，说明打包的路径有问题，只需要找到config文件夹，打开index.js文件，找到
   
   在/之前加上一个 . 即可
8. 至此，一个完整的基于vue-cli创建的vue项目就完成了。